<template>
  <div class="listmain">
      <img :src="this.$store.state.arr2.litimg" alt="">
      <div class="list-main">
          <h2>{{this.$store.state.arr2.name}} <span>{{this.$store.state.arr2.yname}}</span></h2>
          <ul>
              <li>
                  <i class="i1" :style="img"></i>
                  <span>找攻略</span>
              </li>
              <li>
                  <i class="i2" :style="img"></i>
                  <span>看游记</span>
              </li>
              <li>
                  <i class="i3" :style="img"></i>
                  <span>问达人</span>
              </li>
              <li>
                  <i class="i4" :style="img"></i>
                  <span>寻景点</span>
              </li>
          </ul>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            img:{backgroundImage: "url(" + require("sta/mddhead.png") + ")"}
        }
    }
}
</script>

<style scoped>
    .listmain img{
        width: 100%;
    }
    .listmain{
        width: 100%;
        position: relative;
    }
    .list-main{
        width: 90%;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2.25rem;
        margin: 0 auto;
    }
    .list-main h2{
        padding: 0.1rem 0.2rem;
        font-size: 0.7rem;
        color: #fff;
        line-height: 1em;
        font-weight: bold;
        text-shadow: 1px 1px 0 rgba(0,0,0,.7);
        box-sizing: border-box;
        border-bottom: 1px solid #8c8989;
        padding-bottom: 0.2rem;
    }
    .list-main h2 span{
        font-size: 0.35rem;
        color: #fff;
        font-weight: normal;
        position: relative;
    }
    ul{
        display: flex;
        justify-content: space-between;
        font-size: 0.35rem;
        color: #fff;
        margin-top: 0.2rem;
    }
    i{
        width: 0.35rem;
        height: 0.32rem;
        display: inline-block;
        background: url(/img/mddhead.png) no-repeat;
        background-size: 100px;
        vertical-align: middle;
        margin-right: 0.04rem;
    }
    .i1{
        background-position: 0 0;
    }
    .i2{
        background-position: -15px 0;
    }
    .i3{
        background-position: -30px 0;
    }
    .i4{
        background-position: -45px 0;
    }
</style>